<script setup lang="ts">
import {Close, Headset} from '@element-plus/icons-vue'
import {ref} from 'vue'
import router from "@/router";

const show = ref(false)

function openShow() {
  if (!show.value) {
    show.value = true
  }
}

function closeShow() {
  router.push('/')
  show.value = false
}
</script>
<!--background: linear-gradient(to right, #e8c5cd, #8ac2d9) background-color: rgba(232, 197, 205, 0.75);-->

<template>
  <div style="
  width: 100%;
  height: 100%;
  display: flex;background: url(src/assets/image/preview.jpg) no-repeat;background-size: cover">
    <div class="welcome-container" style="
    width: 100%;
    height: 100%;" v-show="!show">
      <div class="title">
        <h1>KNIGHT</h1>
      </div>
      <el-button
          @click="openShow"
          style="
          background: rgb(187,165,55);
          color: Black;
          font-weight: bold;
          width: 200px;
          position: absolute;
          top: 85%;
          right: 50%;
          transform: translate(50%,-50%);
     ">登入
      </el-button>
    </div>

    <div class="Mask" v-show="show">
    </div>
    <div class="loginBox" v-show="show">
      <div class="image-container">
        <h1>
          Welcome Back!
        </h1>
        <p>
          please login!
        </p>
        <div class="image-box">
          <el-image src="./src/assets/image/logo.jpg" fit="cover"/>
        </div>
      </div>
      <div class="loginPage-container">
        <router-view v-slot="{ Component }">
          <transition name="el-fade-in-linear" mode="out-in">
            <component :is="Component"/>
          </transition>
        </router-view>
        <el-button class="close" @click="closeShow" text size="default" :icon="Close" style="
        color: rgba(0,0,0,0.84);
        border-radius: 8px;
        right: 3px;
        top: 0;
        position: absolute"/>
      </div>
    </div>
  </div>
</template>

<style scoped>

.title {
  position: absolute;
  top: 30%;
  right: 50%;
  transform: translate(50%, -50%);
}

.title h1 {
  font-style: oblique;
  font-size: 10rem;
  font-weight: 800;
  letter-spacing: 40px;
  color: whitesmoke;
  text-align: center;
}

.Mask {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.25);
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.94);
  position: absolute;
}

.loginBox {
  width: 1050px;
  height: 600px;
  display: flex;
  position: relative;
  background-color: rgba(10, 10, 10, 0.31);
  border: 1px solid rgb(255, 255, 255, .6);
  border-radius: 8px;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(4px);
  margin: auto;
}

.image-box {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.32);
  overflow: hidden;
  margin: 20px auto
}

.image-container {
  height: 100%;
  border-radius: 8px;
  background-color: rgba(10, 10, 10, 0.3);
  box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.1);
  flex: 1;
}

.image-container h1 {
  margin-top: 100px;
  font-size: 3rem;
  letter-spacing: 3px;
  color: white;
  text-align: center;
  text-shadow: 4px 4px 3px rgba(0, 0, 0, 0.1);
}

.image-container p {
  text-align: center;
  color: white;
  height: 30px;
  margin: 20px 0;
  font-weight: bold;
  line-height: 30px;
  text-shadow: 4px 4px 3px rgba(0, 0, 0, 0.1);
}

.close:hover {
  background: rgba(204, 204, 204, 0.12) !important;
}

.loginPage-container {
  height: 100%;
  flex: 1;
}

</style>